<template>
  <!-- 帖子详情页列表组件 -->

  <common-list
    :index="index"
    :item="listData"
    :isdetail="true"
    :isgeren="true"
    @follow="follow"
    @doSupport="doSupport"
    @doComment="doComment"
    @doShare="doShare"
  >
    <view>{{ listData.content }}</view>
    <view>
      <image
        v-for="(item, index) in listData.images"
        :key="index"
        :src="item.url"
        mode="widthFix"
        @tap="preview(index)"
        class="w-100 my-1"
      ></image>
    </view>
  </common-list>

  <!-- 评论 -->
  <viewider></viewider>

  <scroll-view scroll-y>
    <view class="p-2 font-md font-weight-bold" style="color: rgb(56, 55, 54)">评论 {{ num }}</view>
    <view class="px-2">
      <view class="uni-comment-list1" v-for="(item, index) in pinglun" :key="index">
        <view v-if="item.fid == 0" style="width: 700rpx">
          <view class="flex w-100" :class="item.fid ? 'bg-light rounded p-2' : ''">
            <view class="uni-comment-face">
              <image
                :src="item.picAddress"
                style="width: 95rpx; height: 95rpx"
                class="rounded-circle mr-2"
              ></image>
            </view>
            <view class="uni-comment-body">
              <view class="flex flex-column flex-1">
                <text style="color: rgb(41, 106, 106)">{{ item.toname }}</text>
                <view
                  class="evaluateText"
                  :class="item.contentAll ? 'lineclamp3' : ''"
                  @tap="reply(item.id)"
                >
                  {{ item.content }}
                </view>
                <view class="" v-if="item.isMore">
                  <view class="rightText" v-if="item.contentAll" @tap="changeAllFun(item, index)"
                    >全部</view
                  >
                  <view class="rightText" v-else @tap="changeAllFun(item, index)">收起</view>
                </view>

                <view class="font-sm text-light-black flex align-center justify-between">
                  <text>{{ item.create_time }}</text>
                  <text @tap="huifudin(item, index)">回复</text>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="more" v-if="item.huifu.length">
          <view style="color: #bfc5b8" v-show="item.contentAll1" @tap="changeAllFun1(item, index)">
            展开剩余{{ num1[index] }}条回复
          </view>
          <view v-show="!item.contentAll1">
            <block v-for="(item1, index1) in item.huifu" :key="index1">
              <view class="flex bg-light rounded p-2" style="width: 700rpx">
                <view class="uni-comment-face">
                  <image
                    :src=" item1.picAddress"
                    style="width: 95rpx; height: 95rpx"
                    class="rounded-circle mr-2"
                  ></image>
                </view>
                <view class="uni-comment-body">
                  <view class="flex flex-column flex-1">
                    <text style="color: rgb(166, 87, 64)"
                      >{{ item1.toname }} 回复 {{ item1.toname1 }}</text
                    >

                    <view
                      class="evaluateText"
                      :class="item1.contentAll ? 'lineclamp3' : ''"
                      @tap="reply(item1.id)"
                    >
                      {{ item1.content }}
                    </view>
                    <view class="" v-if="item1.isMore">
                      <view
                        class="rightText"
                        v-if="item1.contentAll"
                        @tap="changeAllFun2(item1, index1)"
                        >全部</view
                      >
                      <view class="rightText" v-else @tap="changeAllFun2(item1, index1)">收起</view>
                    </view>

                    <view class="font-sm text-light-black flex align-center justify-between">
                      <text>{{ item1.create_time }}</text>
                      <text
                        @tap="huifudin(item1, item)"
                        style="position: relative; right: 20rpx; top: 20rpx"
                        >回复</text
                      >
                    </view>
                  </view>
                </view>
              </view>
            </block>
          </view>
          <view v-show="!item.contentAll1" style="color: #b7bbb1" @tap="changeAllFun1(item, index)"
            >收起</view
          >
        </view>
      </view>
    </view>
  </scroll-view>

  <!-- 底部发送消息 -->
  <!-- 底部输入栏 -->
  <!-- 占位 -->
  <view style="height: 100rpx; margin-top: 30rpx"></view>
  <bottom-input @submit="submit" :focus="focus" @blur="blur" :obj="obj1"></bottom-input>
</template>

<script lang="ts" setup>
import { onLoad, onBackPress, onShow, onInit } from '@dcloudio/uni-app'
import commonList from '@/components/common-list/index'
import bottomInput from '@/components/common/bottom-input'

import { formatMessageDate, formatTime, getChatTime } from '@/composables/time'
import { publishwenzAPI, publipinglunAPI, fabupinglunAPI } from '@/services/shequ'
import { ref, computed ,getCurrentInstance} from 'vue'
import { guanzhuStore, myStore } from '@/stores'
const { proxy } = getCurrentInstance() as any
const user = myStore()
// 帖子数据
let listData = ref<any>({})

// {
//     id: 1,
//     img: '../../static/assets/img/海贼王_r.jpg',
//     toname: '小林',
//     content:
//       '服务好，景色好，山河锦绣，树木茂盛，空气清新，鸟语花香，人杰地灵服务好，景色好，山河锦绣，树木茂盛，空气清新，鸟语花香，人杰地灵服务好，景色好，山河锦绣，树木茂盛，空气清新，鸟语花香，人杰地灵服务好，景色好，山河锦绣，树木茂盛，空气清新，鸟语花香，人杰地灵服务好，景色好，山河锦绣，树木茂盛，空气清新，鸟语花香，人杰地灵',
//     time: '下午 20点',
//     fnum: 5,
//     fid: 0,

//     huifu: [
//       {
//         id: 2,
//         img: '../../static/assets/img/海贼王_r.jpg',
//         toname: '小林111',
//         content:
//           '服务好，景色好，山河锦绣，树木茂盛，空气清新，鸟语花香，人杰地灵服务好，景色好，山河锦绣，树木茂盛，空气清新，鸟语花香，人杰地灵服务好，景色好，山河锦绣，树木茂盛，空气清新，鸟语花香，人杰地灵服务好，景色好，山河锦绣，树木茂盛，空气清新，鸟语花香，人杰地灵服务好，景色好，山河锦绣，树木茂盛，空气清新，鸟语花香，人杰地灵',
//         time: '下午 20点',
//         fnum: 5,
//         fid: 1,
//         toname1: '小林2222',
//         denji: false,
//       },
//       {
//         id: 3,
//         img: '../../static/assets/img/海贼王_r.jpg',
//         toname: '小林2222',
//         content:
//           '服务好，景色好，山河锦绣，树木茂盛，空气清新，鸟语花香，人杰地灵服务好，景色好，山河锦绣，树木茂盛，空气清新，鸟语花香，人杰地灵服务好，景色好，山河锦绣，树木茂盛，空气清新，鸟语花香，人杰地灵服务好，景色好，山河锦绣，树木茂盛，空气清新，鸟语花香，人杰地灵服务好，景色好，山河锦绣，树木茂盛，空气清新，鸟语花香，人杰地灵',
//         time: '下午 20点',
//         fnum: 5,
//         fid: 1,
//         toname1: '',
//         denji: true,
//       },
//     ],
//   },
//   {
//     id: 4,
//     img: '../../static/assets/img/海贼王_r.jpg',
//     toname: '小林22222222333',
//     content:
//       '服务好，景色好，山河锦绣，树木茂盛，空气清新，鸟语花香，人杰地灵服务好，景色好，山河锦绣，树木茂盛，空气清新，鸟语花香，人杰地灵服务好，景色好，山河锦绣，树木茂盛，空气清新，鸟语花香，人杰地灵服务好，景色好，山河锦绣，树木茂盛，空气清新，鸟语花香，人杰地灵服务好，景色好，山河锦绣，树木茂盛，空气清新，鸟语花香，人杰地灵',
//     time: '下午 20点',
//     fnum: 5,
//     fid: 0,
//     huifu: [],
//   },
const index = ref(0)

// {
//   title: '标题',
//   content: 'asdasdasdasdasdsadsdasd',
//   time: '2021-01-01',
//   img: '../../static//images/loading 加载中_爱给网_aigei_com.gif',
//   isfollow: false,
//   name: '名称',
//   support: {
//     type: '',
//     support_count: 1,
//     unsupport_count: 2,
//   },
//   comment_count: 2,
//   share_num: 2,
//   images: [
//     {
//       url: 'https://tangzhe123-com.oss-cn-shenzhen.aliyuncs.com/Appstatic/qsbk/demo/datapic/4.jpg',
//     },
//     {
//       url: '../../static/assets/img/海贼王_r.jpg',
//     },
//   ],
// }
// 传过来的帖子信息
onLoad(async (e: any) => {
  // 监听全局关注和顶踩事件
  console.log(e)
  console.log(JSON.parse(e.wenzdetail), '我看看')

  // 初始化操作
  if (e.wenzdetail) {
    index.value = e.index
  }
  listData.value = JSON.parse(e.wenzdetail)
  // 获取文章详情
  let res = await publishwenzAPI({ id: JSON.parse(e.wenzdetail).id })
  console.log(res, '文章数据')

  listData.value.images = res.data
  console.log(listData.value, '文章详情111')

  // 获取评论列表
  await pinglunshuju()

  // let res1 = await publipinglunAPI()
})

const init = (wenzdetail) => {
  console.log(wenzdetail)
  uni.setNavigationBarTitle({
    title: wenzdetail.title,
  })
}

//对按钮顶的判断
// follow
const follow = (index2: number, index1: number) => {
  console.log(listData.value.isfollow, '21312312312321')

  listData.value.isfollow = !listData.value.isfollow
}
// 判断点赞等
//doSupport
const doSupport = (e) => {
  let msg = e.type === 'support' ? '支持' : '不支持'
  // 如果用户已经支持了，就不能再点击   这里list报红是没有错误
  if (listData.value.support.type === e.type) {
    // 提示操作过

    return uni.showToast({
      title: '你已经' + msg + '了',
      icon: 'none',
      duration: 1000,
    })
  }
  // 如果之前已经支持了，按了不支持，就是支持减1，不支持加一
  if (listData.value.support.type === 'support' && e.type === 'unsupport') {
    listData.value.support.support_count--
    listData.value.support.unsupport_count++
  } else if (listData.value.support.type === 'unsupport' && e.type === 'support') {
    listData.value.support.support_count++
    listData.value.support.unsupport_count--
  } else {
    listData.value.support[e.type + '_count']++
  }
  listData.value.support.type = e.type
  // 点赞
  uni.showToast({
    title: msg + '成功',

    duration: 1000,
  })
  // list.value[e.index].support.type = e.type
  // list.value[e.index].support[e.type + '_count']++
}
// 监听分享
const share = ref<any>(null)
const doShare = (e) => {
  share.value.open({
    title: listData.value.title,
    shareText: listData.value.title,
    href: 'https://baidu.com',
    image: listData.value.images[0].url,
  })
  uni.showToast({
    title: '选择你的分享',
    icon: 'success',
    duration: 1000,
  })
}
// 监听评论
const doComment = (e) => {
  uni.showToast({
    title: '评论成功',
    icon: 'success',
    duration: 1000,
  })
}
// 预览图片
// 计算列表要预览的数组
// 通过计算属性出来的 变量是不能进行更改的  不能进行for循环  只能通过ref来写更改 v计算属性的值是只读的，不能直接赋值。+
let previewList: any = computed(() => {
  return listData.value.images.map((item) => item.url)
})
// let previewList1 = ref<any>([])
console.log(previewList, '999999')
// // previewList.value = 'http://159.75.90.81:3005/' + previewList.value

// previewList1.value = previewList.value.map((item) => {
//   return  item.url
// })

const preview = (item) => {
  uni.previewImage({
    current: item,
    urls: previewList.value,
  })
}
// 底部消息发送条的数据
const submit = (data) => {
  if (data === '') {
    return uni.showToast({
      title: '评论不能为空',
      icon: 'none',
    })
  }

  uni.showLoading({
    title: '评论发布中...',
    mask: false,
  })
  // 发送请求
  setTimeout(async () => {
    let res = await fabupinglunAPI({
      content: data,
      user: user.userinfo,
      toobj: obj1.value,
      toindex: index2.value,
      postid: listData.value.id,
    })
    pinglunshuju()
    uni.hideLoading()
    // 发送成功
    uni.showToast({
      title: '评论成功',
      icon: 'success',
      duration: 1000,
    })
  }, 500)
}
// 输入框失去焦点
const focus = ref(false)
const blur = () => {
  obj1.value = {}
  index2.value = 0
  // this.reply_id = 0
  focus.value = false
}
// 如果按返回按键  把弹出层关闭
onBackPress(() => {
  if (share.value) {
    share.value.close()
  }
})
// 解决评论的收缩
const getlist = () => {
  pinglun.value.map((item) => {
    console.log(item)

    if (item.content.length > 15) {
      console.log('家里了')
      // 解决回复的内容
      if (item.huifu.length) {
        item.huifu.map((obj) => {
          if (obj.content.length > 15) {
            obj.isMore = true
            obj.contentAll = true
          } else {
            obj.isMore = false
            obj.contentAll = false
          }
          return {
            ...obj,
          }
        })
      }

      item.isMore = true
      item.contentAll = true
    } else {
      item.isMore = false
      item.contentAll = false
    }
    return {
      ...item,
    }
  })
}
// 评论显示和隐藏
const changeAllFun = (item, index) => {
  pinglun.value.map((elem, ind) => {
    if (index === ind) {
      elem.contentAll = !elem.contentAll
    }
    return {
      ...item,
    }
  })
}
// 评论显示和隐藏回复的内容
const changeAllFun2 = (item1, index) => {
  pinglun.value.map((elem, ind) => {
    elem.huifu.map((obj, index1) => {
      if (index === index1) {
        obj.contentAll = !obj.contentAll
      }
      console.log(obj, '222222222222222')
    })

    return {
      ...item1,
    }
  })
}
// 评论恢复的收缩
const gethuifu = () => {
  pinglun.value.map((item) => {
    console.log(item)

    item.contentAll1 = true
    item.ishuifu = false
    return {
      ...item,
    }
  })
}
// 回复的隐藏和显示
const changeAllFun1 = (item, index) => {
  pinglun.value.map((item, ind) => {
    if (index === ind) {
      item.ishuifu = !item.ishuifu
      item.contentAll1 = !item.contentAll1
    }
    console.log(item.ishuifu, 'WWWWWWWWWWWWWWWWWWWWWWW')
    return {
      ...item,
    }
  })
  console.log(pinglun.value, 'hhhhhhhhhhhhhhhhhhhhhh')
}
// 回复选择后可以发送回复对应的人
let obj1 = ref<any>({})
let index2 = ref<any>(0)
const huifudin = (obj, item1) => {
  obj1.value = obj
  index2.value = item1
  // this.reply_id = 0
  focus.value = true
}
// 评论数据
const pinglun = ref<any>([])
// 评论的总个数
const num = ref<any>(0)
// 展开下面的条数
const num1 = ref<any>([])
// 获取评论 数据
const pinglunshuju = async () => {
  let res = await publipinglunAPI({
    user: user.userinfo,
    listData: listData.value,
  })
  pinglun.value = res.data
  num.value = res.num
  num1.value = res.num1
  // 解决评论的长度 收缩
  await getlist()
  //解决评论恢复的收缩
  await gethuifu()
  pinglun.value.map((obj) => {
    obj.huifu.map((obj1) => {
      obj1.create_time = formatMessageDate(obj1.create_time / 1)
    })
    obj.create_time = formatMessageDate(obj.create_time / 1)
  })
  console.log(res, '获取到评论数据')
}



</script>

<style lang="scss">
@import url('../../static/assets/wxss/iconfont.css');

.evaluateText {
  margin: 10px 0 0 0;
  letter-spacing: 0.5px;
  line-height: 20px;
}
.rightText {
  color: #345e90;
  text-align: right;
}
.more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  // 纵向排列
  flex-direction: row;
  // 换行
  flex-wrap: wrap;
  position: relative;
  left: 40rpx;
  width: 100%;
}
.lineclamp3 {
  /* 设置元素溢出隐藏，文本截断显示省略号 */
  overflow: hidden;
  text-overflow: ellipsis;
  /* 使用-webkit-box显示元素 */
  display: -webkit-box;
  /* 设置元素显示为3行 */
  -webkit-line-clamp: 3;
  /* 设置元素的主轴方向为垂直方向 */
  -webkit-box-orient: vertical;
  /* 设置元素的白间距为正常 */
  white-space: normal;
}
.uni-comment-list1 {
  flex-wrap: nowrap;
  padding: 10rpx 0;
  margin: 10rpx 0;
  width: 100%;
  display: flex;
  // 纵向排列
  flex-direction: row;
  // 换行
  flex-wrap: wrap;
}
</style>
